<template>
	<view class="login-container" @touchmove.prevent @touchstart.prevent="handleTouchStart"
		@touchend.prevent="handleTouchEnd" @mousewheel.prevent>
		<!-- 自定义导航栏 -->
		<custom-navbar title="登录"></custom-navbar>
		
		<!-- Header with time -->
		<view class="header" style="margin-top: 64px;">

		</view>

		<!-- Logo and brand section -->
		<view class="content">
			<view class="logo-container">
				<view class="logo"></view>
			</view>
			<view class="brand-name">
				<text>中宸速电</text>
			</view>
			<view class="slogan">
				<text>电动汽车充电服务助手</text>
			</view>
		</view>

		<!-- Login/Register button -->
		<view class="footer">
			<button class="login-btn" @click="loginAction">微信一键登录</button>
		</view>
	</view>
</template>

<script>
import loginApi from '@/src/api/login'
import CustomNavbar from '@/components/CustomNavbar.vue'

export default {
	components: {
		CustomNavbar
	},
	data() {
		return {
			loading: false
		};
	},
	onLoad(options) {
		// 从options.scene中获取参数
		if (options.scene) {
			let scene = decodeURIComponent(options.scene);
			// 解析scene参数
			let params = {};
			scene.split('&').forEach(item => {
					let parts = item.split('=');
					params[parts[0]] = parts[1];
				});

				console.log('扫码参数:', params);

				// 处理充电桩ID
				if (params.pileId) {
					console.log('充电桩ID:', params.pileId);
					// 进一步处理逻辑
					
				}
			}
		
		// 页面加载时检查是否已登录
		this.checkLoginState();

		// 禁止页面下拉
		const currentWebview = this.$scope && this.$scope.$getAppWebview ? this.$scope.$getAppWebview() : null;
		if (currentWebview && currentWebview.setStyle) {
			currentWebview.setStyle({
				bounce: 'none',
				pullToRefresh: {
					support: false
				}
			});
		}

		// 添加全局事件拦截
		this.preventPageDrag();
	},
	// 禁止页面下拉刷新
	onPullDownRefresh() {
		uni.stopPullDownRefresh();
	},
	onShow() {
		// 重新设置页面禁止拖动状态
		this.preventPageDrag();
	},
	onReady() {
		// 页面准备完成后，再次禁止拖动
		setTimeout(() => {
			this.preventPageDrag();
		}, 300);
	},
	beforeDestroy() {
		// 清理全局事件
		this.clearPreventDrag();
	},
	methods: {
		// 防止页面拖动的全局处理
		preventPageDrag() {
			// 屏蔽页面拖动
			document.addEventListener('touchmove', this.preventEvent, { passive: false });
			document.addEventListener('mousewheel', this.preventEvent, { passive: false });
		},

		// 移除全局事件
		clearPreventDrag() {
			document.removeEventListener('touchmove', this.preventEvent);
			document.removeEventListener('mousewheel', this.preventEvent);
		},

		// 阻止默认事件
		preventEvent(e) {
			e.preventDefault();
			e.stopPropagation();
		},

		// 处理触摸开始事件
		handleTouchStart(e) {
			// 阻止任何触摸事件
			e.preventDefault();
			e.stopPropagation();
		},

		// 处理触摸结束事件
		handleTouchEnd(e) {
			// 阻止任何触摸事件
			e.preventDefault();
			e.stopPropagation();
		},

		// 检查是否已登录，如已登录则跳转首页
		checkLoginState() {
			const token = uni.getStorageSync('token');
			if (token) {
				console.log('检测到已存在登录token，准备跳转到首页');
				uni.switchTab({
					url: '/pages/index/index'
				});
			}
		},

		loginAction() {
			if (this.loading) return;
			this.loading = true;

			uni.showLoading({
				title: '登录中...'
			});

			// 调用微信登录接口获取code
			uni.login({
				provider: 'weixin',
				success: (loginRes) => {
					console.log('微信登录成功，获取到code:', loginRes.code);

					// 获取到登录code后，调用后端接口进行登录验证
					this.loginWithCode(loginRes.code);
				},
				fail: (err) => {
					console.error('微信登录失败:', err);
					uni.hideLoading();
					this.loading = false;

					uni.showToast({
						title: '微信登录失败，请重试',
						icon: 'none',
						duration: 2000
					});
				}
			});
		},

		// 使用code调用后端登录接口
		loginWithCode(code) {
			console.log('调用后端登录接口，code:', code);

			// 调用登录接口
			loginApi.login(code)
				.then(res => {
					console.log('登录成功，后端返回数据:', res);

					// 隐藏加载提示
					uni.hideLoading();
					this.loading = false;

					// 获取token和用户信息 - 修复：添加安全检查防止undefined错误
					let token, userInfo;
					
					// 处理不同的数据结构
					if (res && typeof res === 'object') {
						if (res.data) {
							// 如果响应格式是 { data: { token: '...' } }
							token = res.data.token || res.data.accessToken;
							userInfo = res.data.userInfo || res.data;
						} else {
							// 如果响应格式是 { token: '...' }
							token = res.token || res.accessToken;
							userInfo = res.userInfo || res;
						}
					}
					
					// 确保获取到token
					if (!token) {
						console.error('登录返回数据格式有误:', res);
						uni.showToast({
							title: '登录失败，返回数据有误',
							icon: 'none',
							duration: 2000
						});
						return;
					}

					// 保存token和用户信息到Vuex和本地存储
					this.$store.dispatch('user/login', {
						token,
						userInfo
					});

					// 显示登录成功提示
					uni.showToast({
						title: '登录成功',
						icon: 'success',
						duration: 1500,
						success: () => {
							// 登录成功后跳转到首页
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/index/index'
								});
							}, 1500);
						}
					});
				})
				.catch(err => {
					console.error('登录接口调用失败:', err);
					uni.hideLoading();
					this.loading = false;

					// 显示错误信息
					uni.showToast({
						title: err.message || '网络错误，请重试',
						icon: 'none',
						duration: 2000
					});
				});
		}
	}
};
</script>

<style>
.login-container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: #ffffff;
	border: 1px solid #eaeaea;
	overflow: hidden;
	/* 禁止页面滚动 */
	position: fixed;
	/* 固定定位防止滚动 */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	/* 防止ios橡皮筋效果 */
	overscroll-behavior: none;
	-webkit-overscroll-behavior: none;
	/* 额外防止拖动属性 */
	touch-action: none;
	-webkit-touch-callout: none;
	-webkit-user-drag: none;
	user-select: none;
	-webkit-user-select: none;
}

.content {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
	pointer-events: auto;
	/* 允许内部元素交互 */
}

.logo-container {
	margin-bottom: 20px;
}

.logo {
	width: 120px;
	height: 120px;
	border-radius: 60px;
	background: linear-gradient(135deg, #2196f3, #0d72c5);
}

.brand-name {
	margin-top: 20px;
	font-size: 24px;
	font-weight: bold;
	color: #2196f3;
}

.slogan {
	margin-top: 10px;
	font-size: 14px;
	color: #666666;
}

.footer {
	padding: 20px;
	margin-bottom: 40px;
	pointer-events: auto;
	/* 允许按钮交互 */
}

.login-btn {
	background-color: #2196f3;
	color: #ffffff;
	border-radius: 25px;
	height: 45px;
	line-height: 45px;
	font-size: 16px;
	border: none;
}

/* 针对不同平台的特定样式 */
/* #ifdef APP-PLUS */
page {
	overflow: hidden;
	width: 100%;
	height: 100%;
}

/* #endif */
</style>